import { View } from '@tarojs/components';
import React from 'react';

interface IZbTitleProps {
  /**
   * 标题
   */
  title: string;
  /**
   * css样式
   */
  className?: string;
  /**
   * 图标
   */
  icon?: React.ReactNode;
  /**
   * 右边 额外Node
   */
  extra?: React.ReactNode;
}

const ZbTitle = (props: IZbTitleProps) => {
  const { title, icon, className = 'text-lg', extra } = props;
  return (
    <View className="flex items-center">
      <View className={`pl-2 font-medium flex-1 ${className}`}>
        {icon}
        {title}
      </View>
      <View className="flex-1 pr-2 justify-items-end">{extra}</View>
    </View>
  );
};

export default ZbTitle;
